<template>
  <d2-container>
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             ref="form"
             @submit.native.prevent="onSubmit"
             @reset.native.prevent="onReset"
             size="small">
      <el-form-item label="标题">
        <el-input v-model="query.keywords"
                  placeholder="用户ID|标题|任务号"
                  clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="筛选创建时间" label-width="120px">
        <el-date-picker
          v-model="query.time_start"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="startTimePickerOption"
          value-format="timestamp"
          placeholder="选择开始日期">
        </el-date-picker>
        -
        <el-date-picker
          v-model="query.time_end"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="endTimePickerOption"
          value-format="timestamp"
          placeholder="选择结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="query.category_id">
          <el-option label="全部"
                     key="all"
                     value=""></el-option>
          <el-option v-for="(item, index) in cates" :key="index" :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status">
          <el-option label="全部"
                     value=""></el-option>
          <el-option label="进行中"
                     value="1"></el-option>
          <el-option label="已暂停"
                     value="3"></el-option>
          <el-option label="已结束"
                     value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   native-type="submit">筛选</el-button>
<!--        <el-button native-type="reset">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column label="任务号"
                       prop="id"></el-table-column>
      <el-table-column label="用户ID"
                       prop="user_id"></el-table-column>
      <el-table-column label="创建时间"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.time_create | timeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="标题"
                       prop="title"></el-table-column>
      <el-table-column label="分类"
                       prop="category_name"></el-table-column>
      <el-table-column label="金额"
                       prop="price">
        <template slot-scope="{ row }">
          {{row.price * row.num + row.task_fee | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column label="手续费"
                       prop="task_fee">
        <template slot-scope="{ row }">
          {{row.task_fee | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column label="数量"
                       prop="num"></el-table-column>
      <el-table-column label="单价"
                       prop="price">
        <template slot-scope="{ row }">
          {{row.price | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column label="等级"
                       prop="status">
        <template slot-scope="{ row }">
          {{row | taskLevelFilter}}
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       prop="status">
        <template slot-scope="{ row }">
          {{STATUS_MAP[row.status]}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="145">
        <template slot-scope="{row}">
          <el-button type="text"
                     size="small" @click="detail(row)">详情</el-button>
          <template v-if="row.status === 1">
            <el-button type="text"
                       size="small" @click="stop(row)">暂停</el-button>
          </template>
         <template v-else>
           <el-button type="text"
                      size="small" @click="proceed(row)">继续</el-button>
         </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="currentPage"
                   :page-size="limit"
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
    <verify-dialog ref="verifyDialog"></verify-dialog>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import verifyDialog from '../components/verify-dialog'
import { verify } from './api'

const STATUS_MAP = { 1: '进行中', 3: '已暂停', 4: '已结束' }

export default {
  name: 'manage',
  data () {
    const _this = this
    return {
      query: {
        q: undefined,
        time_start: '',
        time_end: '',
        category_id: '',
        status: '',
        type: 'success'
      },
      STATUS_MAP,
      startTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.time_end > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.time_end < timestamp
        }
      },
      endTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.time_start > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.time_start > timestamp
        }
      }
    }
  },
  mixins: [commonCurd],
  components: {
    verifyDialog
  },
  async asyncData ({ store, route }) {
    return store.dispatch('task/manage/fetchList', { page: 1, limit: 12, type: 'success' })
  },
  async mounted () {
    await this.fetchCate({ page: 1, limit: 50 })
  },
  computed: {
    ...mapGetters('task/manage', ['list', 'total']),
    ...mapGetters('task-classify', { cates: 'list' })
  },
  methods: {
    ...mapActions('task/manage', ['fetchList']),
    ...mapActions('task-classify', {
      fetchCate: 'fetchList'
    }),

    async detail ({ id }) {
      await this.$refs.verifyDialog.open(id)
      this.fetch()
    },
    async stop ({ id }) {
      await verify({ id }, { status: 3 })
      this.$message.success('暂停成功')
      this.fetch()
    },
    async proceed ({ id }) {
      await verify({ id }, { status: 1 })
      this.$message.success('继续成功')
      this.fetch()
    },
    onSubmit () {
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.data = this.$options.data
      this.fetch(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.fit-size {
  height: 259px;
}
.action-body {
  margin-left: 40px;
  margin-bottom: 18px;
}
</style>
